<template>
	<view class="box" @touchmove.stop.prevent="() => {}">
		<view class="content">
			<view class="content-top">
				<view class="content-title" :style="{'padding-top':statusBarH+10+'px'}">
					<view class="title-text" @click="titleClick(0)" :class="{'title-text1':activation == 0}">校园招聘会
					</view>
					<view class="title-text" @click="titleClick(1)" :class="{'title-text1':activation == 1}">网络招聘会
					</view>
					<view class="title-text" @click="titleClick(2)" :class="{'title-text1':activation == 2}">地区招聘会
					</view>
				</view>
				<view class="imageCla">
					<image class="imgCla1" :src="URL+guanggaoweiList.FilePath" mode=""></image>
				</view>
				<view class="remenhuodongCla">
					<view class="remenhuodongClaleft">
						<view class="textCla">热门招聘会</view>
						<view class="">
							<image class="imgcla" src="/static/image/specialrecruitment/tubiao1.png" mode=""></image>
						</view>
					</view>
					<view class="remenhuodongClaright">
						<view class="xianshangCla1" @click="categoryClick(1)"
							:class="{'xianshangCla':activationXian == 1}">线上</view>
						<view class="xianshangCla1" @click="categoryClick(0)"
							:class="{'xianshangCla':activationXian == 0}">线下</view>
						<view class="xianshangCla1" @click="categoryClick(2)"
							:class="{'xianshangCla':activationXian == 2}">直播</view>
					</view>
				</view>
			</view>
			<!-- <view class="" v-if="list.length > 0" style="padding-bottom: 30rpx;"> -->
			<scroll-view scroll-y :style="{'height':heightTop+'px'}" v-if="list.length > 0" style="background-color: #F7F9FB;">
				<view class="listCla" v-for="(item,index) in list" :key="index" @click="getToClick(item)">
					<view class="listClaImg">
						<image class="listClaImg1" :src="URL+item.Thumbnail" mode=""></image>
					</view>
					<view class="listText">
						{{item.Title}}
					</view>
					<view class="listBottom">
						<view class="listBottom1">
							<image class="listBottomImg" src="/static/image/specialrecruitment/tubiao2.png" mode="">
							</image>
							<span>{{item.RecruitCorpCount}}</span>
							<span>企业</span>
						</view>
						<view class="listBottom1">
							<image class="listBottomImg" src="/static/image/specialrecruitment/tubiao3.png" mode="">
							</image>
							<span>{{item.RecruitJobCount}}</span>
							<span>职位</span>
						</view>
						<view class="listBottom1">
							<image class="listBottomImg" src="/static/image/specialrecruitment/tubiao4.png" mode="">
							</image>
							<span>{{item.RecruitPeopleCount}}</span>
							<span>人数</span>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- </view> -->
			<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" width="350" marginTop="150">
			</u-empty>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				URL: this.$config.domain.staticUrl,
				title: "专场招聘",
				statusBarH: 0, //状态栏高度
				customBarH: 0, //导航栏高度
				windowWidth: 0, //窗口宽度
				windowHeight: 0, //窗口高度
				safeAreaInsets: 0, //底部导航栏
				heightTop: 0,
				activation: 0, //0校园招聘会  1网络招聘会  2地区招聘会
				activationXian: 1, //0.线上 1.线下 2.直播
				list: [],
				PageIndex: 1,
				PageSize: 5,
				guanggaoweiList:{},  //广告图片
			}
		},
		onLoad() {},
		created() {
			const app = getApp()
			// 获取状态栏和导航条高度 窗口宽度
			this.statusBarH = app.globalData.statusBarH;
			this.customBarH = app.globalData.customBarH;
			this.windowWidth = app.globalData.phoneInformation.windowWidth;
			this.windowHeight = app.globalData.phoneInformation.windowHeight;
			this.safeAreaInsets = app.globalData.phoneInformation.safeAreaInsets.bottom;
			this.listData();
			this.guanggaowei();

		},
		mounted() {
			setTimeout(() => {
				this.gaodu();
			}, 1000)
		},
		
		// 计算方法
		methods: {

			gaodu()  {
				const query = uni.createSelectorQuery().in(this);
				query.select('.content-top').boundingClientRect((data, data1) => {
					this.heightTop = this.windowHeight - data.height - this.safeAreaInsets - 60;
				}).exec();
			},

			titleClick(activation) {
				this.activationXian = 1;
				if (activation == this.activation) return
				this.activation = activation;
				this.guanggaowei();
				this.listData();
				
			},

			getToClick(item) {
				let obj = {
					Id:item.Id,
					LiveVideo:item.LiveVideo,
					RecruitCorpCount:item.RecruitCorpCount,
					MobileHeaderLogo:item.MobileHeaderLogo,
					LiveID:item.LiveID
				}
				uni.navigateTo({
					url: '/pages/views/packageC/type-jobhunting/zhuanchangzhaopin?item=' + JSON.stringify(obj)
				})
			},

			categoryClick(activationXian) {
				if (activationXian == this.activationXian) return
				this.activationXian = activationXian;
				this.listData();
			},

			listData() {
				let obj = {
					JobFairType: this.activation, //招聘会类型 0-校园招聘会 1-网络招聘会 2-地区招聘会
					// Online: 1,//招聘会类型 0-线下 1-线上
					// LiveVideo: null,//是否视频直播 0-否 1-是
					PageIndex: this.PageIndex,
					PageSize: this.PageSize
				}
				if (this.activationXian == 2) {
					obj.LiveVideo = 1;
					obj.Online = null;
				} else {
					obj.LiveVideo = null;
					obj.Online = this.activationXian;
				}
				this.$http.fairs.jobfairsList(obj).then((res) => {
					if (res.Success) {
						this.list = res.Result.Items;
					}
				})
			},
			//顶部广告位
			guanggaowei(){
				this.$http.live.coreadlist({PositionId: 430056271876229,}).then((res) => {
					if(res.Success){
						if(this.activation == 0){
							this.guanggaoweiList = res.Result[0]
						}else if(this.activation == 1){
							this.guanggaoweiList = res.Result[1]
						}else {
							this.guanggaoweiList = res.Result[2]
						}
					}
				})
			},

		},

	}
</script>

<style lang="scss" scoped>
	.box {
		background-color: #f7f9fb;
		width: 100%;
		height: 100vh;
		// position: fixed;         

		.content {
			width: 100%;
			height: 100%;
			background-image: url('/static/image/specialrecruitment/background.png');
			background-repeat: no-repeat;
			background-size: cover;

			.content-top {
				margin-bottom: 20rpx;
			}

			.content-title {
				display: flex;
				align-items: center;
				// position: fixed;

				.title-text {
					margin-left: 43rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.5);
				}

				.title-text1 {
					font-size: 38rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-left: 43rpx;
				}
			}

			.imageCla {
				margin-top: 29rpx;
				display: flex;
				justify-content: center;

				.imgCla1 {
					width: 690rpx;
					height: 260rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}

			.remenhuodongCla {
				padding: 60rpx 30rpx 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.remenhuodongClaleft {
					display: flex;

					.textCla {
						font-size: 32rpx;
						font-weight: bold;
						color: #000000;
					}

					.imgcla {
						width: 53rpx;
						height: 28rpx;
						margin-left: 10rpx;
					}
				}

				.remenhuodongClaright {
					display: flex;

					.xianshangCla {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						width: 100rpx;
						height: 44rpx;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						border: 2rpx solid #1C6CFF;
						color: #1C6CFF !important;
					}

					.xianshangCla1 {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						width: 100rpx;
						height: 44rpx;
						color: #999999;
					}

				}
			}

			.listCla {
				margin: 29rpx 30rpx 0 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 20px;

				.listClaImg1 {
					width: 688rpx;
					height: 230rpx;
					border-radius: 20rpx 20rpx 0 0;
				}

				.listText {
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					margin:0 20rpx;
				}

				.listBottom {
					display: flex;
					justify-content: space-around;
					width: 100%;
					margin: 23rpx 0 17rpx 0;

					span {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-left: 10rpx;
					}

					.listBottom1 {
						display: flex;
						align-items: center;

						.listBottomImg {
							width: 26rpx;
							height: 31rpx;
						}
					}

				}
			}
		}

	}



	// .content {
	// 	.content-box {
	// 		background-image: url(/static/image/zc/zhuanchangbeijing.png);
	// 		background-repeat: no-repeat;
	// 		background-size: cover;
	// 		padding: 30rpx 30rpx;

	// 		.xyzpbox {
	// 			margin-bottom: 50rpx;


	// 			.con_box {
	// 				display: flex;
	// 				justify-content: space-around;

	// 				.per_box {
	// 					.per {
	// 						width: 353rpx;
	// 						height: 405rpx;
	// 						background-repeat: no-repeat;
	// 						background-size: cover;
	// 						padding-top: 100rpx;
	// 					}
	// 				}

	// 				.text_box {

	// 					.title_box {
	// 						text-align: center;

	// 						.xyzp {
	// 							margin: 40rpx 0 20rpx 0;
	// 							width: 262rpx;
	// 							height: 69rpx;
	// 							text-align: center
	// 						}
	// 					}

	// 					.text_item {
	// 						background-color: #3D60FF;
	// 						padding: 30rpx 30rpx;

	// 						.text {
	// 							text-indent: 2em;
	// 							color: #fff;
	// 							font-size: 28rpx;
	// 							font-family: Source Han Sans CN;
	// 							font-weight: 400;
	// 							line-height: 40rpx;

	// 						}
	// 					}

	// 				}
	// 			}

	// 		}

	// 		.bottom_box {
	// 			width: 100%;
	// 			height: 100%;
	// 			margin: 80rpx;
	// 		}

	// 	}
	// }
</style>